import {h} from 'vue'
import {DataTableColumns, NButton, NSwitch, NTag} from 'naive-ui'
import GgIcon from "@/components/icon/gg-icon.vue"

// 点击类型枚举
export enum ClickType {
  UPDATE = 'update',
  ADD = 'add',
  ADD_DOWN = 'add-down',
  DELETE = 'delete',
  NONE = 'no'
}

// 默认的菜单模型
export const DEFAULT_MENU_MODEL: Menu.MenuModel = {
  id: 0,
  title: '',
  name: '',
  icon: '',
  requiresAuth: false,
  disabled: false,
  show: false,
  menuType: 1,
  iconType: 1,
  href: '',
  route: {
    path: '',
    component: ''
  },
}

// 表单规则
export const useFormRules = () => {
  return {
    name: {
      required: true,
      message: '请输入菜单名称',
      trigger: 'blur'
    },
    title: {
      required: true,
      message: '请输入菜单标题',
      trigger: 'blur'
    },
    icon: {
      required: true,
      message: '请输入菜单图标',
      trigger: 'blur'
    },
    'route.path': [{
      required: true,
      message: '请输入菜单路径',
      trigger: ['blur', 'change']
    }]
  }
}

// 表格列配置
export const useColumns = (handleClick: (type: ClickType, row: Menu.MenuModel) => void): DataTableColumns => {
  return [
    {
      title: '菜单名称',
      resizable: true,
      key: 'name',
      align: 'center',
    },
    {
      title: '标题',
      resizable: true,
      key: 'title',
      align: 'center',
    },
    {
      title: '路径',
      resizable: true,
      key: 'route.path',
      align: 'center',
      ellipsis: {
        tooltip: true
      }
    },
    {
      title: '菜单类型',
      resizable: true,
      key: 'menuType',
      align: 'center',
      render(row: Menu.MenuModel) {
        return h(
          NTag,
          {
            style: {
              marginRight: '6px'
            },
            type: row.menuType == 1 ? "info" : row.menuType == 2 ? "warning" : "error",
            bordered: false
          },
          {
            default: () => row.menuType == 1 ? "菜单" : row.menuType == 2 ? "路由" : "超链接"
          }
        )
      }
    },
    {
      title: '是否需要权限',
      resizable: true,
      key: 'requiresAuth',
      align: 'center',
      render(row: Menu.MenuModel) {
        return h(NSwitch, {
          disabled: true,
          value: row.requiresAuth,
          'onUpdate:value': (newValue: boolean) => {
            row.requiresAuth = newValue
          }
        })
      }
    },
    {
      title: '排序',
      resizable: true,
      align: 'center',
      key: 'order',
    },
    {
      title: '图标',
      resizable: true,
      key: 'icon',
      align: 'center',
      render(row: Menu.MenuModel) {
        return [
          h(
            GgIcon,
            {
              name: row.icon,
            },
          ),
        ]
      }
    },
    {
      title: '操作',
      key: 'actions',
      align: 'center',
      render(row: Menu.MenuModel) {
        return [
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.UPDATE, row)
            },
            {default: () => '修改'}
          ),
          h(
            NButton,
            {
              size: 'small',
              onClick: () => handleClick(ClickType.DELETE, row)
            },
            {default: () => '删除'}
          )
        ]
      }
    }
  ]
}

// 右键菜单选项
export const useContextMenuOptions = (handleClick: (type: ClickType, row: Menu.MenuModel) => void) => {
  return [
    {
      label: '新增',
      key: 'add',
      onClick: (row: Menu.MenuModel) => {
        handleClick(ClickType.ADD, row)
      }
    },
    {
      label: '编辑',
      key: 'edit',
      onClick: (row: Menu.MenuModel) => {
        handleClick(ClickType.UPDATE, row)
      }
    },
    {
      label: '添加下级',
      key: 'add-down',
      onClick: (row: Menu.MenuModel) => {
        handleClick(ClickType.ADD_DOWN, row)
      }
    },
    {
      label: '删除',
      key: 'delete',
      onClick: (row: Menu.MenuModel) => {
        handleClick(ClickType.DELETE, row)
      }
    }
  ]
}

// Modal样式配置
export const modalStyle = {
  width: '600px'
}
